<template>
  <div class="title">{{ guide('guideSteps') }}</div>
  <div class="page">
    <Row :gutter="12">
      <Col :span="6" v-for="(item, index) in info" :key="index">
        <div class="item-button">
          <button>{{ item }}</button>
        </div>
      </Col>
    </Row>
  </div>
</template>
<script setup>
  import { Row, Col } from 'ant-design-vue';
  import { ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t: guide } = useI18n('guidePage');
  const info = [
    guide('depart'),
    guide('role'),
    guide('staff'),
    guide('position'),
    guide('catergory'),
    guide('rfidReader'),
    guide('antenna'),
    guide('tag'),
  ];
</script>
<style lang="less" scoped>
  .title {
    width: 100%;
    text-align: center;
    color: red;
    margin-top: 3%;
    font-size: 20px;
    color: #f70606;
    font-weight: 550;
  }
  .page {
    width: 100%;
    margin-top: 10%;
    .item-button {
      display: flex;
      justify-content: center;
      margin: auto;
      button {
        width: 280px;
        height: 100px;
        margin: 10px;
        font-size: 15px;
        border-radius: 10px;
        color: rgb(255, 255, 255);
        background-color: #1890ff;
        border: 1px solid #91d5ff;
      }
    }
  }
</style>
